<!--商品管理-->
<template>
    <div class="edit-popup" style="width: 100%">
<!--        <popup-->
<!--            ref="popupRef"-->
<!--            title="商品管理"-->
<!--            :async="true"-->
<!--            width="50vw"-->
<!--			:cancelButtonText="false"-->
<!--			:confirmButtonText="false"-->
<!--            @close="handleClose"-->
<!--        >-->
            <div class="popup-div">
				<div class="flex justify-end">
				    <el-button
				        type="primary"
				        @click="handleunders"
				        class="w-[84px] h-[30px] mb-[9px] text-[12px] ml-2"
				        :disabled="ids.length > 0 ? false : true"
				    >一键关联</el-button
				    >
				</div>
                <div class="table-div" style="overflow-y: auto">
					<el-tabs  class="demo-tabs">
					    <!-- 表格 -->
					    <el-table
					        size="large"
					        :data="tableData"
					        @selection-change="handleSelectionChange"
					    >
					        <el-table-column type="selection" width="60" />
							<el-table-column label="产品封面" prop="name" min-width="100" >
								<template #default="{ row }">
									<el-image
										style="width: 60px; height: 60px"
										:src="row.pic"
										:preview-src-list="[row.pic]"
										:hide-on-click-modal="true"
										:preview-teleported="true"
										:fit="'cover'"
									>
									</el-image>
								</template>
							</el-table-column>
							<el-table-column label="产品价格" prop="price" min-width="100" />
					        <el-table-column label="产品名称" prop="name" min-width="200" />
					        <el-table-column label="操作" min-width="160" fixed="right">
					            <template #default="{ row }">
					                <el-button
					                    type="primary"
					                    @click="handleunder(row,1)"
					                   v-if="row.is_choice==2"
					                >
					                    关联直播间
					                </el-button>
					                <el-button
					                    type="warning"
					                    @click="handleunder(row,2)"
										v-if="row.is_choice==1"
					                >
					                    取消关联
					                </el-button>

					            </template>
					        </el-table-column>
					    </el-table>

					</el-tabs>
                </div>

            </div>
<!--        </popup>-->
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import Popup from '@/components/popup/index.vue'
	import feedback from '@/utils/feedback'
	import { roomMzGoodsList,roomMzGoodsChoice,roomMzGoodsNotChoice} from '@/api/live'
    const emit = defineEmits(['success', 'close'])
    const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const tableData = ref([]);

	const queryParams = reactive({
	    room_id: '',
	});
	const { pager, getLists} = usePaging({
	    fetchFun: roomMzGoodsList,
	    params: queryParams
	});
    // 打开弹窗
    const open = () => {
        popupRef.value?.open();
    };
	const ids = ref<any[]>([])
	const handleSelectionChange = (val: any[]) => {
	    ids.value = val.map((item) => {
	        return item.id
	    })
	}
    // 取消弹窗
    const handleClose = () => {
        emit('close', 0)
    };

	//上下架商品
	const handleunder = async (row: any, status: number) => {
	    await feedback.confirm(`确定要${status == 1 ? '关联直播间' : '取消关联'}`);
		if(status==1){
			await roomMzGoodsChoice({ room_id: queryParams.room_id, goods_ids:row.id });
		}else{
			await roomMzGoodsNotChoice({ room_id: queryParams.room_id, goods_id:row.id });
		}
		row.is_choice = row.is_choice == 1 ? 2 : 1;
		// tableData.value = []
	   // getLists().then((res) => {
	   //     tableData.value = res.list
	   // });
	};

	const handleunders = async () => {
		let dataids = ''
		ids.value.map((item,index)=>{
			dataids = dataids+item+','
		})
		dataids = dataids.slice(0, -1)
	    await feedback.confirm(`确定要一键关联直播间?`);
		await roomMzGoodsChoice({ room_id: queryParams.room_id, goods_ids:dataids });
	    tableData.value = []
	    getLists().then((res) => {
	        tableData.value = res.list
	    });
	};
    const setFormData = (id:string) => {
        queryParams.room_id = id;
        getLists().then((res) => {
            tableData.value = res.list
        });
    };
	console.log(tableData)
    //提交


    defineExpose({
        open,
        setFormData
    });
</script>

<style lang="scss" scoped>
    .popup-div {
        height: 60vh;
        display: flex;
        flex-direction: column;
        .popup-div-title {
            position: sticky;
            top: 0;
            z-index: 999;
            background-color: #ffffff
        }
    }
</style>
